<template>
  <span class="rest-time">
      <div v-if="times.curStatus === '已结束'">
        <span style="color: grey">{{ times.curStatus }}</span>
      </div>
      <div v-else class="countdown-space">
          <span class="countdown">{{ times.days }}</span> <span>天</span>
          <span class="countdown">{{ times.hours }}</span> <span>时</span>
          <span class="countdown">{{ times.minutes }}</span> <span>分</span>
          <span class="countdown">{{ times.seconds }}</span> <span>秒</span>
      </div>
    </span>
</template>

<script>
import { onBeforeUnmount, onMounted } from '../../../docs/.vitepress/cache/deps/vue.js'
import { ref } from 'vue'
import { countdown } from '../../utils/countdown.js'

export default {
  name: 'Countdown',
  props: {
    endDatetime: { type: String, default: '', required: true }
  },
  setup(props, { emit }) {
    const times = ref('')
    // 不断的变时间
    const upotimes = () => {
      times.value = countdown(props.endDatetime, new Date())
    }
    onMounted(() => {
      setInterval(upotimes, 1000)
    })
    onBeforeUnmount(() => {
      clearInterval()
    })

    return {
      times
    }
  }
}
</script>

<style scoped lang="less">
.rest-time {
  display: flex;
  align-items: center;
  justify-content: center;
  .countdown-space {
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      margin-right: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

}

.countdown {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 40px;
  width: 40px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(0, 70, 153, .2);
  background: rgba(0, 70, 153, .1);
  color: #004a97;
  font-family: DIN;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 38px;
}
</style>
